<template>
	<Split v-model="split" class="container">
		<div slot="left" class="left"><Tree :data="orgTree" @on-select-change="treeSelected"></Tree></div>
		<div slot="right" class="right">
			<Layout style="padding:0 24px 24px;height:100%;">
				<Breadcrumb style="margin:24px 0">
					<BreadcrumbItem>首页</BreadcrumbItem>
					<BreadcrumbItem>组织管理</BreadcrumbItem>
					<BreadcrumbItem v-if="currentNode.title">{{ currentNode.title }}</BreadcrumbItem>
				</Breadcrumb>
				<Form inline>
					<ButtonGroup style="margin-right:24px;"><Button title="新增组织" :disabled="!currentNode.data" icon="md-add" @click="editModal = true"></Button></ButtonGroup>
					<FormItem><Input type="text" placeholder="组织代码" clearable v-model="pageRequest.condition.orgCode" /></FormItem>
					<FormItem><Input type="text" placeholder="组织名称" clearable v-model="pageRequest.condition.orgName" /></FormItem>
					<FormItem><Button type="primary" icon="ios-search" shape="circle" @click="list">查询</Button></FormItem>
				</Form>
				<Content ref="content" style="padding:0;background:#fff;">
					<Table :loading="loading" :columns="tableColumns" :data="pageData.content" :height="tableHeight" border>
						<template slot-scope="{ row, index }" slot="action">
							<Button type="warning" size="small" style="margin-right: 5px" @click="modify(row)">修改</Button>
							<Button type="error" size="small" style="margin-right: 5px" @click="remove(row)">删除</Button>
							<Button type="primary" size="small" @click="openRoleModal(row)">角色分配</Button>
						</template>
						<template slot="footer">
							<Page style="margin-left:10px;" :total="pageData.total" :current="pageData.page" :page-size="15" @on-change="changePage"></Page>
						</template>
					</Table>
				</Content>
				<!-- 组织信息模态框 -->
				<Modal v-model="editModal" @on-visible-change="onVisibleChange" title="编辑组织信息" footer-hide>
					<Form ref="orgForm" :model="orgInfo" :label-width="80" :rules="orgRules">
						<FormItem label="组织代码" prop="orgCode"><Input type="text" placeholder="请输入组织代码" v-model="orgInfo.orgCode" /></FormItem>
						<FormItem label="组织名称" prop="orgName"><Input type="text" placeholder="请输入组织名称" v-model="orgInfo.orgName" /></FormItem>
						<FormItem label="组织简称" prop="aliasName"><Input type="text" placeholder="请输入组织简称" v-model="orgInfo.aliasName" /></FormItem>
						<FormItem label="组织类型" prop="orgTypeCode">
							<Select v-model="orgInfo.orgTypeCode" placeholder="请选择组织类型">
								<Option v-for="item in orgTypeOptions" :value="item.orgTypeCode" :key="item.orgTypeCode">{{ item.orgTypeName }}</Option>
							</Select>
						</FormItem>
						<FormItem label="序号" prop="sequence"><Input type="number" placeholder="请输入序号" v-model="orgInfo.sequence" /></FormItem>
						<FormItem><Button type="primary" @click="save">保存</Button></FormItem>
					</Form>
				</Modal>
				<!-- 角色分配模态框 -->
				<Modal :width="400" v-model="roleModal" title="角色分配" footer-hide>
					<div class="auth-list-content">
						<Select v-model="roleSelection" multiple>
							<Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.roleName }}</Option>
						</Select>
					</div>
					<Button type="primary" @click="saveOrgRole">确定</Button>
					<Button type="warning" @click="roleModal = false" style="margin-left:5px;">取消</Button>
				</Modal>
			</Layout>
		</div>
	</Split>
</template>

<script language="JavaScript">
export default {
	components: {},
	data() {
		return {
			split: 0.15, // 左侧分栏占比
			tableHeight: 100, // 自适应表格高度
			loading: false, // 加载中
			orgTree: [], // 组织树
			currentNode: {}, // 当前选中的节点
			tableColumns: [
				{
					title: '组织代码',
					key: 'orgCode',
					width: 'auto',
					minWidth: 250,
					resizable: true
				},
				{
					title: '组织全称',
					key: 'orgName',
					width: 'auto',
					minWidth: 250,
					resizable: true
				},
				{
					title: '组织简称',
					key: 'aliasName',
					width: 'auto',
					minWidth: 250,
					resizable: true
				},
				{
					title: '序号',
					key: 'sequence',
					width: 100
				},
				{
					title: '操作',
					slot: 'action',
					width: 250
				}
			], // 表格定义
			pageRequest: {
				page: 1,
				rows: 15,
				sort: 'sequence:asc',
				condition: {
					parentId: -1, // 父组织的ID，必须有
					orgCode: '', // 组织代码
					orgName: '', // 组织名称
					orgTypeCode: '' // 组织类型代码
				}
			},
			pageData: {
				page: 1,
				total: 2,
				content: [] // 表格数据
			},
			editModal: false, // 组织编辑对话框
			orgInfo: {
				orgCode: '',
				orgName: '',
				aliasName: '',
				orgTypeCode: '',
				sequence: ''
			}, // 组织信息
			orgRules: {
				orgCode: [
					{
						required: true,
						message: '必填'
					}
				],
				orgName: [
					{
						required: true,
						message: '必填'
					}
				],
				aliasName: [
					{
						required: true,
						message: '必填'
					}
				],
				orgTypeCode: [
					{
						required: true,
						message: '必填'
					}
				],
				sequence: [
					{
						required: true,
						message: '必填'
					}
				]
			},
			orgTypeOptions: [
				{
					orgTypeCode: 'BRANCH',
					orgTypeName: '分公司'
				},
				{
					orgTypeCode: 'DEPARTMENT',
					orgTypeName: '部门'
				},
				{
					orgTypeCode: 'GROUP',
					orgTypeName: '小组'
				},
				{
					orgTypeCode: 'AUTH_GROUP',
					orgTypeName: '特别小组'
				}
			],
			roleModal: false, // 角色分配模态框
			roleSelection: [], // 选中的角色
			roleList: [], // 角色列表
			currentOrgInfo: {} // 当前选中的组织
		};
	},
	computed: {},
	watch: {
		'orgInfo.orgCode': function() {
			this.orgInfo.orgCode = this.orgInfo.orgCode.toUpperCase();
		}
	},
	created: function() {},
	mounted: function() {
		this.$nextTick(() => {
			this.tableHeight = this.$refs.content.$el.clientHeight;
			this.getOrgTree();
			this.getRoleList();
		});
	},
	methods: {
		// 获取组织树
		getOrgTree: function() {
			this.$request.get('/admin/sys/org/tree', {}, res => {
				this.orgTree = res.data || [];
			});
		},
		// 选中组织节点
		treeSelected: function(list, item) {
			this.currentNode = item;
			this.orgInfo.parentId = item.data.id;
			this.pageRequest.condition.parentId = item.data.id;
			this.list();
		},
		// 组织列表
		list: function() {
			if (!this.pageRequest.condition.parentId) {
				return;
			}
			this.loading = true;
			this.$request.post(
				'/admin/sys/org/list',
				this.pageRequest,
				res => {
					this.loading = false;
					this.pageData = res.data || this.pageData;
				},
				false,
				false
			);
		},
		// 分页
		changePage: function(page) {
			this.pageRequest.page = page;
			this.list();
		},
		// 保存组织
		save: function() {
			if (!this.orgInfo.parentId) {
				this.$Message.warning('请选择父组织');
				return;
			}
			this.$refs['orgForm'].validate(valid => {
				if (valid) {
					this.$request.post(
						'/admin/sys/org/save',
						this.orgInfo,
						res => {
							this.editModal = false;
							this.$refs['orgForm'].resetFields();
							this.list();
							this.getOrgTree();
						},
						true,
						true
					);
				}
			});
		},
		// 修改组织
		modify: function(row) {
			this.editModal = true;
			this.$nextTick(() => {
				this.orgInfo = Object.assign({}, row);
			});
		},
		// 删除组织
		remove: function(row) {
			this.$Modal.confirm({
				title: '确认删除？',
				content: '<p>删除后不可恢复。</p>',
				onOk: () => {
					this.$request.post(
						'/admin/sys/org/delete',
						row,
						res => {
							this.list();
							this.getOrgTree();
						},
						true,
						true
					);
				},
				onCancel: () => {}
			});
		},
		// 关闭对话框
		onVisibleChange: function() {
			this.$refs['orgForm'].resetFields();
			this.orgInfo.id = '';
		},
		// 获取角色列表
		getRoleList: function() {
			this.$request.post(
				'/admin/sys/role/list',
				{
					page: 1,
					rows: 99999,
					sort: 'sequence:asc'
				},
				res => {
					this.roleList = (res.data || {}).content || [];
				},
				false,
				false
			);
		},
		// 打开角色分配对话框
		openRoleModal: function(row) {
			this.$request.get(
				`/admin/sys/org-role/getIds/${row.id}`,
				{},
				res => {
					this.roleSelection = res.data || [];
				},
				false,
				false
			);
			this.roleModal = true;
			this.currentOrgInfo = row;
		},
		// 更换角色
		saveOrgRole: function() {
			let orgRoleInfo = {
				orgId: this.currentOrgInfo.id,
				roleIds: this.roleSelection
			};
			this.$Modal.confirm({
				title: '确认？',
				content: '确认修改组织角色？',
				onOk: () => {
					this.$request.post(
						'/admin/sys/org-role/save',
						orgRoleInfo,
						res => {
							this.roleModal = false;
						},
						true,
						true
					);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.container {
	height: 100%;
	background-color: white;

	.left {
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		padding: 10px 20px;
		background-color: white;
	}

	.right {
		height: 100%;
	}
}
.auth-list-content {
	height: 450px;
	overflow-y: auto;
}
</style>
